<template>
  <el-dialog title="添加总单" v-model="v" @close="close" width="34%" style="min-width: 800px">
    <el-form ref="formEl" :data="form" :rules="rules" status-icon>
      <el-descriptions column="1" border size="large">
        <el-descriptions-item label="总单号" class-name="description-style">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="单号" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="1" label="主题" class-name="description-style">
          <el-input type="textarea" v-model="form.theme"></el-input>
        </el-descriptions-item>
        <el-descriptions-item :span="1" label="优先级" class-name="description-style">
          <el-select no-data-text="暂无数据" v-model="form.priority" style="width: 100px">
            <el-option v-for="item in priority_options" :key="item.value" :label="item.label" :value="item.value">
              <el-tag :hit="false" effect="dark" :color="get_theme_color(item.value)" :disable-transitions="true">
                {{ item.label }}
              </el-tag>
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="指派给" class-name="description-style">
          <el-select v-model="form.assign.name" multiple filterable remote reserve-keyword placeholder="请输入关键字搜索,支持拼音检索"
            :remote-method="remoteMethod" :loading="search.loading" loading-text="搜索中..." style="width: 240px">
            <el-option v-for="item in search.items" :key="item.id" :label="item.name" :value="item.account">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="工作量" class-name="description-style">
          <el-input style="width: 120px" type="number" :min="0" v-model="form.workload"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="任务归属" class-name="description-style">
          <el-form-item prop="revert">
            <el-input v-model="form.revert" placeholder="归属哪个资料片" maxlength="100"></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间" class-name="description-style">
          <el-form-item prop="start_time">
            <el-date-picker :default-time="new Date(1995, 10, 27)" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              v-model="form.start_time" type="date" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="完成时间" class-name="description-style">
          <el-form-item prop="end_time">
            <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model="form.end_time" type="date" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="备注" class-name="description-style">
          <el-form-item prop="remarks">
            <el-input v-model="form.remarks" type="textarea" />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <el-button @click="v = false" type="danger"> 取消 </el-button>
      <el-button @click="submit_form" type="primary"> 添加 </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, watchEffect, ref, reactive, toRaw } from "vue";
import {
  TimeFormatter,
  TimeCompareWidth,
  str_utils,
  post as http_post,
  URL,
  jsonHasEmpty,
  get_theme_color,
  priority_options
} from "@/tool/common";
import { ElMessage } from "element-plus";
import { saveForm, tabSelection } from "@/tool/status";
import { xuqiudan } from "@/test/table_data_test";
const tab_sel = tabSelection();
export default defineComponent({
  name: "project",
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    param: {
      type: String,
      default: () => null,
    },
  },
  setup: (props, ctx) => {
    const formEl = ref();
    let form = reactive(xuqiudan);
    // 优先级options
    const store = saveForm();
    const rules = reactive({
      name: [
        {
          required: true,
          trigger: "blur",
          message: "不为空",
          validator: function (a) {
            return str_utils.not_empty(form[a["field"]]);
          },
        },
      ],
    });
    const v = ref(false);
    const search = reactive({
      loading: false,
      items: [],
    });
    watchEffect(() => {
      v.value = props.visible;
      changeTime(new Date(form.start_time), new Date(form.end_time));
    });
    function close() {
      ctx.emit("update:visible", false);
    }
    function _Time(d) {
      if (!d) {
        return;
      }
      return TimeFormatter(d).get_full("", "-", "-");
    }
    // 远程搜索用户
    function remoteMethod(word) {
      if (str_utils.not_empty(word)) {
        http_post({
          url: URL.BASE + URL.API_USER_SEARCH,
          data: {
            keyword: word,
          },
        })
          .then((res) => {
            search.items = res || null;
          })
          .catch((err) => void err);
      }
    }
    // 验证时间
    function changeTime(time1, time2) {
      let eq = TimeCompareWidth(time1, time2);
      let is_after = eq.is_after();
      let is_equal = eq.is_equal();
      if (is_after || is_equal) {
        form.end_time = null;
        ElMessage.error({
          message: "结束时间必须大于开始时间",
        });
        return false;
      } else if (eq.is_before()) {
        return true;
      } else {
        return false;
      }
    }
    // 提交表单
    function submit_form() {
      let real = _.clone(toRaw(form));
      real.assign = real.assign.name;
      if (real) {
        store.save(real);
        let pass = jsonHasEmpty(store.data, "name", "workload", "revert", "theme");
        if (!pass) {
          ElMessage.error("表格数据不完整");
        } else {
          let cache_menu_id = tab_sel.param;
          let msg;
          if (str_utils.not_empty(cache_menu_id)) {
            real.menu_id = cache_menu_id;
            real.token = Cookies.get("token");
            http_post({
              url: URL.BASE + URL.API_PARENT_PUSH,
              data: real,
            })
              .then((res) => {
                msg = {
                  message: res.msg || res.data.message,
                  type: res.code === 200 ? "success" : "error",
                };
                if (res.code === 200) {
                  ctx.emit("update:visible", false);
                  ctx.emit("success");
                }
              })
              .catch(() => {
                msg = {
                  message: "网络异常",
                  ytpe: "error",
                };
              })
              .finally(() => {
                ElMessage(msg);
              });
          } else {
            ElMessage.error("当前未选择文件夹");
          }
        }
      }
    }
    return {
      v,
      close,
      form,
      _Time,
      search,
      remoteMethod,
      rules,
      submit_form,
      formEl,
      str_utils,
      priority_options,
      get_theme_color,
    };
  },
});
</script>

<style lang="scss" scoped>
.description-style {
  min-height: 100px;
}

.el-form-item {
  margin-bottom: 0;
}
</style>
